<template>
  <div class="common-layout">
    <el-container>
      <el-aside width="200px" :style="{ height: '100%' }">
        <el-menu
          active-text-color="#ffd04b"
          background-color="#545c64"
          class="el-menu-vertical-demo"
          :default-active="route.path"
          text-color="#fff"
          @open="handleOpen"
          @close="handleClose"
          :router="true"
        >
          <h2 :style="{ height: '50px', lineHeight: '50px' }">
            <img
              :style="{ width: '80%', height: '50px', marginLeft: '15px' }"
              :src="require('../../static/Icons/png/ticketing.png')"
              alt=""
            />
          </h2>
          <el-menu-item
            v-for="(item, key) in routerList"
            :key="key"
            :index="item.path"
          >
            <template #title v-if="item.path == route.path">
              <img :src="item.img2" alt="" class="itemImg" />
              <span>{{ item.title }}</span>
            </template>
            <template #title v-else>
              <img :src="item.img" alt="" srcset="" class="itemImg" />
              <span>{{ item.title }}</span>
            </template>
          </el-menu-item>
        </el-menu>
      </el-aside>
      <el-container>
        <el-header>
          <Bread />
        </el-header>
        <el-main> <router-view></router-view></el-main>
      </el-container>
    </el-container>
  </div>
</template>

<script setup>
import { reactive, ref, watchEffect } from "vue";
import { useRoute } from "vue-router";

import Bread from "../../components/Bread.vue";
const activeIndex = ref(0);
const route = useRoute();
const routes = ref("");
const routerList = reactive([
  {
    path: "/index/home",
    title: "首页",
    img: require("../../static/Icons/png/home.png"),
    img2: require("../../static/Icons/png/home2.png"),
  },
  {
    path: "/index/adminCar",
    title: "车次管理",
    img: require("../../static/Icons/png/adminCar.png"),
    img2: require("../../static/Icons/png/adminCar2.png"),
  },
  {
    path: "/index/adminStation",
    title: "车站管理",
    img: require("../../static/Icons/png/adminStation.png"),
    img2: require("../../static/Icons/png/adminStation2.png"),
  },
  {
    path: "/index/adminLines",
    title: "线路管理",
    img: require("../../static/Icons/png/adminLines.png"),
    img2: require("../../static/Icons/png/adminLines2.png"),
  },
  {
    path: "/index/adminTickets",
    title: "车票管理",
    img: require("../../static/Icons/png/adminTickets.png"),
    img2: require("../../static/Icons/png/adminTickets2.png"),
  },
  {
    path: "/index/adminOrder",
    title: "订单管理",
    img: require("../../static/Icons/png/adminOrder.png"),
    img2: require("../../static/Icons/png/adminOrder2.png"),
  },
  {
    path: "/index/orbitMonitoring",
    title: "个人轨迹监控",
    img: require("../../static/Icons/png/orbitMonitoring.png"),
    img2: require("../../static/Icons/png/orbitMonitoring2.png"),
  },
]);
const handleOpen = (key, keyPath) => {};
const handleClose = (key, keyPath) => {
  // console.log(key);
};
</script>

<style>
.common-layout {
  width: 100%;
  height: 100%;
}
.el-container {
  width: 100%;
  height: 100%;
}
.el-menu {
  height: 100%;
  display: flex;
  flex-direction: column;
}
.el-menu-item {
  font-weight: 600;
  padding: 10px;
  margin-top: 20px;
  display: flex;
  justify-content: space-around;
  align-items: center;
  text-align: center;
}
.itemImg {
  width: 28px;
  height: 30px;
}
.el-menu-item span {
  font-size: 16px;
}
</style>
